<template>
  <div class="editable-cell">
    <a-popover
      v-model="visible"
      :title="title"
      trigger="click"
      placement="top"
      :destroyTooltipOnHide="true"
    >
      <template slot="content">
        <div class="popoverStyle">
          <a-row type="flex" align="top" justify="center">
            <a-col :flex="6">
              <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                layout="inline"
                :style="{ width: '100%' }"
              >
                <a-form-model-item
                  class="inline-item"
                  :style="{ width: '180px' }"
                  prop="checkKey"
                >
                  <a-input v-model="form.checkKey" />
                </a-form-model-item>
              </a-form-model>
            </a-col>
            <a-col :flex="4">
              <rj-space :style="{ lineHeight: '40px' }">
                <a-button type="primary" @click="saveEditCell">{{
                  $t('deviceDetail.change1')
                }}</a-button>
                <a-button @click="cancelEditCell">{{
                  $t('common.cancel')
                }}</a-button>
              </rj-space>
            </a-col>
          </a-row>
        </div>
      </template>
      <a @click="showEditTableCell" class="user-name-bottom">
        {{ !!value ? value : noneTip }}
        <icon-font v-if="showEditIcon" type="ic-edit" style="font-size: 15px" />
      </a>
    </a-popover>
  </div>
</template>

<script>
import { i18nRender } from '@/locales';
export default {
  data() {
    return {
      visible: false,
      form: {
        checkKey: this.value || '',
      },
      rules: {
        checkKey: this.checkRules || [],
      },
    };
  },
  props: {
    title: {
      type: String,
      default: i18nRender('businessNet.set'),
    },
    placeholder: {
      type: String,
      default: '',
    },
    record: {
      type: Object,
      require: true,
    },
    checkRules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: '',
    },
    //参数为空时的提示信息
    noneTip: {
      type: String,
      default: i18nRender('deviceDetail.add'),
    },
    // 是否展示编辑图标
    showEditIcon: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    showEditTableCell() {
      this.visible = true;
    },

    saveEditCell() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('change', this.form.checkKey);
          this.visible = false;
        }
      });
    },
    cancelEditCell() {
      this.visible = false;
      this.resetData();
    },

    resetData() {
      this.form = {
        checkKey: this.value || '',
      };
      this.rules = {
        checkKey: this.checkRules || [],
      };
    },
  },
};
</script>

<style lang="less" scoped>
.popoverStyle {
  width: 350px;
  display: flex;
  justify-content: space-between;
}
.user-name-bottom {
  text-decoration: none;
  border-bottom: 1px dashed #1da57a;
}
</style>
